<template>
    <div class="wrap-tag">
        <span v-bind="props" ref="tag" class="tag"></span>
    </div>
</template>
<script setup lang="ts">
import { defineProps, ref, onMounted } from "vue";
const tag = ref<HTMLSpanElement>();
const props = defineProps({
    name: {
        type: String,
        default: null,
    },
    theme: {
        type: String,
        default: null,
        required: false,
    },
});

onMounted(() => {
    console.log("props==", props);
    console.log("tag==", tag.value);
    setName();
    setTheme();
});
const setName = () => {
    tag.value!.innerHTML = props.name;
};
const setTheme = () => {
    if (!props.theme) return;
    tag.value!.style.backgroundColor = props.theme;
};
</script>

<style lang="less" scoped>
.tag {
    padding: 10px;
    font-size: 16px;
    color: #fff;
    background-color: red;
    border-radius: 5px;
}

.wrap-tag {
    margin: 30px;
}
</style>
